<template>
  <div class="app-main">
    <div class="Department-container">
      <!-- 按钮 -->
      <el-row class="elButtom">
        <el-button type="primary" size="small" @click="doclick">添加角色</el-button>
      </el-row>
      <!-- 表格 -->
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column align="center" fixed prop="name" label="角色" width="290">
            <!--点击编辑后  进行if判断 -->
            <template v-slot="{row}">
              <el-input v-if="row.isEdit" v-model="editForm.name" />
              <div v-else> {{ row.name }} </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="state" label="启用" width="285">
            <!-- 自定义列结构 把1 和0 改变成 已启用和未启用 -->
            <template v-slot="{row}">
              <!--点击编辑后  进行if判断 -->
              <el-switch v-if="row.isEdit" v-model="editForm.state" :active-value="1" :inactive-value="0" />
              <span v-else>{{ row.state===1?'已启用':'未启用' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="description" label="描述" width="290">
            <!--点击编辑后  进行if判断 -->
            <template v-slot="{row}">
              <el-input v-if="row.isEdit" v-model="editForm.description" type="textarea" />
              <div v-else> {{ row.description }} </div>
            </template>
          </el-table-column>
          <el-table-column v-slot="{row}" align="center" fixed="right" label="操作" width="320">
            <!--点击编辑后  进行if判断 -->
            <template v-if="row.isEdit">
              <el-button type="primary" style="width:100px;" @click="submitclick(row)">确认</el-button>
              <el-button style="width: 100px;" @click="cancelclick(row)">取消</el-button>
            </template>
            <template v-else>
              <el-button type="text" size="small" @click="allotclick(row.id)"> 分配权限 </el-button>
              <el-button type="text" size="small" @click="editclick(row)"> 编辑 </el-button>
              <el-button type="text" size="small" @click="delclick(row.id)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-row type="flex" justify="end" class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :total="totalData"
          :current-page="form.page"
          :page-size="form.pagesize"
          @current-change="handleCurrentChange"
        />
      </el-row>
      <!-- 修改密码弹出框 -->
      <el-dialog width="500px" title="新增角色" :visible.sync="showDialog" @close="close">
        <el-form ref="ruleFormref" :model="addForm" :rules="rules" label-width="100px">
          <el-form-item label="角色名称" prop="name" label-width="100px">
            <el-input v-model="addForm.name" placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item label="启用" prop="state" label-width="100px">
            <!-- :active-value="1" 这样写 代表给组件传递数字 "1"   -->
            <!-- active-value="1" 这样写 代表给组件传递字符串 "1"  -->
            <el-switch v-model="addForm.state" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-form-item label="角色描述" prop="description" label-width="100px">
            <el-input v-model="addForm.description" type="textarea" :rows="3" style="width:100%" placeholder="请输入角色描述" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" style="width:100px;" @click="submitForm">确认</el-button>
          <el-button style="width: 100px;" @click="cancelForm">取消</el-button>
        </div>
      </el-dialog>
      <!-- 点击分配权限弹出框 -->
      <el-dialog title="分配权限" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
        <!-- 导入树形结构 -->
        <el-tree ref="tree" :data="upData" :props="{ label: 'name' }" :default-checked-keys="permIds" show-checkbox node-key="id" default-expand-all />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible=false">取 消</el-button>
          <el-button type="primary" @click="yesclick">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getRoleList, postRoleList, deleteRoleList, putRoleList, getSysRoleList, putAssignPrem } from '@/api/role'
// 获取-权限点列表 渲染分配权限里面树形图
import { getPermissionRequest } from '@/api/permission'
// 递归函数(树形图)
import { transListToTreeData } from '@/utils'
export default {
  name: 'Role',
  data() {
    return {
      // 默认分配权限弹出框是关闭状态
      dialogVisible: false,
      // 表单
      tableData: [
        { name: '',
          state: '',
          description: ''
        }
      ],
      // 分页
      form: {
        page: 1, // 当前页数
        pagesize: 10 // 每页的条数
      },
      // 总条数
      totalData: 0,
      // 默认模态框是关闭状态
      showDialog: false,
      // 模态框 表单值
      addForm: {
        name: '', // 角色名称
        description: '', // 角色描述
        state: 1 // 角色状态，默认是启用的,1启用状态 0未启用状态
      },
      // 表单非空和正则校验
      rules: {
        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 2, max: 10, message: '请输入2-10位角色名称', trigger: 'blur' }],
        description: [{ required: true, message: '请输入角色描述', trigger: 'blur' },
          { min: 1, max: 100, message: '请输入1-100位角色描述', trigger: 'blur' }]
      },
      // 下面是编辑/修改的对象
      editForm: {
        name: '',
        description: '',
        state: 1
      },
      // 分配权限里面需要的id(角色id) 和 permIds(角色关联的权限集合)
      dilist: null,
      permIds: [],
      // 分配权限里面需要的树形结构数组 通过发送的 获取-权限点列表 响应回来的数据进行页面渲染
      upData: []
    }
  },
  // 使用钩子函数 调用分页查询角色列表 的axios
  created() {
    this.getRole()
  },
  methods: {
    // 封装模态框 X按钮
    close() {
    // 关闭模态框
      this.showDialog = false
      // 清空表单内容
      this.$refs.ruleFormref.resetFields()
    },
    // 发送 分页查询角色列表 的axios
    async getRole() {
      const res = await getRoleList(this.form)
      console.log(res)
      // 拿到数据可以进行页面渲染
      // 渲染页数
      this.totalData = res.data.data.total
      // 渲染表格
      this.tableData = res.data.data.rows
      // 我们可以通过 设置一个isEdit属性 用来控制每一行的是否是编辑状态还是数据展示状态
      this.tableData.forEach(item => {
        // 一定要有一个思维， 数据驱动视图， 页面上的变化，最终都是由数据控制的，
        // 这里 添加的动态属性isEdit 不具备响应式特点 也就是数据变化 但是页面不会渲染
        //  通过 This.$Set(目标对象, 属性名称, 初始值) 可以针对目标对象 添加的属性 添加响应式
        this.$set(item, 'isEdit', false)
      })
    },
    // 获取 点击页码后的值
    handleCurrentChange(value) {
      this.form.page = value // 赋值当前页码
      this.getRole() // 调用函数 重新渲染页面
    },
    // 点击添加角色按钮
    doclick() {
      // 打开模态框
      this.showDialog = true
    },
    // 点击模态框确认按钮
    async submitForm() {
      // 发送ajax
      await postRoleList(this.addForm)
      // 提示框
      this.$message('新增角色成功')
      // 调用删除方法
      this.close()
      // 调用方法 渲染页面
      this.getRole()
    },
    // 点击模态框取消按钮
    cancelForm() {
      // 调用删除方法
      this.close()
      // 提示框
      this.$message('已取消')
    },
    // 点击删除按钮
    delclick(id) {
      console.log(id)
      // 弹出框
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 发送删除的ajax请求
        await deleteRoleList(id)
        // 调用方法 渲染页面
        this.getRole()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击编辑
    editclick(row) {
      // 打开当前行之前，做一个排他思想，将其他的已经打开的关闭掉，保证同一个时间点只能编辑一行数据
      // 这个能否同时打开编辑多个，取决于公司的产品经理，通用的场景是只能打开编辑一行数据
      // eslint-disable-next-line no-return-assign
      this.tableData.forEach(item => item.isEdit = false)
      row.isEdit = true
      // 把row所有的数据name,description,id等信息赋值给editForm 然后 通过editForm 去对点击编辑后的表单进行v-model数据绑定
      this.editForm = { ...row }
      console.log(row)
    },
    // 点击编辑里面的确定
    async submitclick(row) {
      // 进行条件判断 如果表单里面有值就进行发送ajax请求 如果没有值 那就提示用户填写内容
      if (this.editForm.name && this.editForm.description) {
        // 发送ajax请求
        await putRoleList(this.editForm)
        // 提示框
        this.$message('更新成功')
        // 更新数据 重新渲染页面 调用函数
        this.getRole()
        // 关闭编辑框
        row.isEdit = false
      } else {
        // 提示框
        this.$message('角色和描述不能为空')
      }
    },
    // 点击编辑里面的取消按钮
    cancelclick(row) {
      // 关闭编辑按钮内容
      row.isEdit = false
      // 提示框
      this.$message('取消编辑')
    },
    // 点击分配权限按钮
    async allotclick(id) {
      // 树状结构
      // 发送渲染表格的axios 获取-权限点列表
      const ress = await getPermissionRequest()
      // console.log(ress)
      // 通过递归把平铺数据改成树状结构 然后赋值upData 渲染页面
      this.upData = transListToTreeData(ress.data.data, 0)
      // 发送ajax请求 获取-角色详情
      const res = await getSysRoleList(id)
      // console.log(res)
      // 赋值 分配权限里面需要的id(角色id) 和 permIds(角色关联的权限集合)
      this.dilist = res.data.data.id
      this.permIds = res.data.data.permIds // 这个集合是为了渲染树形图里面的勾选框的
      // 打开模态框 (调整弹层顺序，因为获取拥有的角色是异步过程，如果弹层显示在前，会出现卡顿的效果，表现出缓慢的效果。)
      this.dialogVisible = true
    },
    // 点击分配权限弹出框里面的确定按钮
    async yesclick() {
      // 获取点击树状结构里面的勾选数据
      console.log(this.$refs.tree.getCheckedKeys())
      // 将勾选的数据赋值给permIds(角色关联的权限集合) 用于发送分配权限-角色的aixos
      this.permIds = this.$refs.tree.getCheckedKeys()
      // 发送 分配权限-角色的aixos(里面需要传递两个参数 id(角色id) 和 permIds(角色关联的权限集合))
      await putAssignPrem({
        id: this.dilist,
        permIds: this.permIds
      })
      // 提示框
      this.$message('分配权限成功')
      // 关闭模态框
      this.dialogVisible = false
      // 清空permIds
      this.permIds = []
    },
    // 分配权限弹出框关闭按钮
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  padding: 10px;
  background:  #f5f6f8;
  .Department-container{
  font-size: 14px;
  background: #fff;
  color: #606266;
  .elButtom {
    padding: 7px 15px;
    .elTable{
      margin: 10px 20px ;
    }
  }
  .pagination {
    margin-top: 20px;
  }
}
}
</style>
